<template>
	<dv-full-screen-container class="full-screen-container">
		<el-row :span="24" style="height: 5vw; padding-top: 1vw">
			<el-col :span="6">
				<dv-decoration10 :dur="6" style="height: 5px" />
			</el-col>
			<el-col :span="3">
				<dv-decoration8 style="height: 50px" :color="['#7791D7', '#7791D7']" />
			</el-col>
			<el-col :span="6" style="display: flex; justify-content: center; flex-wrap: wrap; position: relative">
				<div style="font-size: 2vw; text-align: center">大数据可视化平台</div>
				<dv-decoration6 style="width: 300px; height: 15px" :color="['#409eff', '#7791D7']" />
			</el-col>
			<el-col :span="3">
				<dv-decoration8 :reverse="true" :color="['#7791D7', '#7791D7']" style="height: 50px" />
			</el-col>
			<el-col :span="6" style="display: flex; justify-content: space-between; flex-direction: column; padding-bottom: 1vw">
				<dv-decoration10 :dur="6" class="rotate-180" style="height: 5px" />
				<div style="font-size: x-large; text-align: end; padding-right: 1vw">2025年05月05日 星期六</div>
			</el-col>
		</el-row>
		<el-row :span="24" style="padding: 0 1vw">
			<el-col :span="6" style="height: 51.25vw">
				<el-row :span="24" style="height: 22vw">
					<dv-border-box13>
						<div class="title">
							<dv-button :bg="false">温湿度</dv-button>
						</div>
						<div style="height: 100%; width: 100%; display: flex; gap: 1vw; justify-content: center">
							<div style="width: 40%; height: 50%">
								<v-chart :option="temperatureOption" />
							</div>
							<div style="width: 40%; height: 50%">
								<v-chart :option="humidityOption" />
							</div>
						</div>
						<div class="data-display">
							<div class="data-item">
								<div class="data-label">🌡️当前温度</div>
								<div class="data-value" id="current-temp">23.5°C</div>
								<div class="data-label">标准范围: 18-26°C</div>
							</div>

							<div class="data-item">
								<div class="data-label">💧当前湿度</div>
								<div class="data-value" id="current-humidity">65%</div>
								<div class="data-label">标准范围: 40-70%</div>
							</div>
						</div>
					</dv-border-box13>
				</el-row>
				<el-row :span="24" style="height: 28vw">
					<dv-border-box12></dv-border-box12>
				</el-row>
			</el-col>
			<el-col :span="12" style="height: 51.25vw">
				<el-row :span="24" style="height: 33vw; display: flex; justify-content: center; align-items: center">
					<img src="../../assets/档案室3d图.png" style="width: 80%; height: 80%" />
				</el-row>
				<el-row :span="24" style="height: 17vw">
					<dv-border-box12>
						<div class="title">
							<dv-button :bg="false">空气质量</dv-button>
						</div>
						<el-row :span="24" style="height: 17vw">
							<el-col :span="8" style="display: flex; justify-content: center; align-items: center; height: 100%">
								<dv-decoration-9 style="height: 10vw; width: 10vw">
									<div style="text-align: center">
										<div style="font-size: xx-large" class="gradient-text-normal">68</div>
										<div>AQI指数</div>
									</div>
								</dv-decoration-9>
							</el-col>
							<el-col :span="16">
								<div style="width: 95%; height: 80%">
									<v-chart :option="lineOption" />
								</div>
							</el-col>
						</el-row>
					</dv-border-box12>
				</el-row>
			</el-col>
			<el-col :span="6" style="height: 51.25vw">
				<el-row :span="24" style="height: 25vw">
					<dv-border-box13>
						<div class="title">
							<dv-button :bg="false">十防监控</dv-button>
						</div>
						<div class="device-grid">
							<div v-for="device in devices" :key="device.id" class="device-card">
								<div class="device-icon">
									<i :class="[device.icon]" class="device-icon-style"></i>
								</div>
								<div class="card-body">
									<div class="card-title">{{ device.name }}</div>
									<div :class="[device.status == '正常' ? 'normal' : 'error']" class="card-text">{{ device.status }}</div>
								</div>
							</div>
						</div>
					</dv-border-box13>
				</el-row>
				<el-row :span="24" style="height: 25vw">
					<dv-border-box12>
						<div class="title">
							<dv-button :bg="false">设备状态</dv-button>
						</div>
						<div class="device-status-container">
							<div class="device-summary">
								<div class="summary-number ">13</div>
								<div>设备总数</div>
							</div>
							<div class="device-stats">
								<div class="stat-item">
									<div>运行中</div>
									<div class="stat-value stat-success">10</div>
								</div>
								<div class="stat-item">
									<span>异常</span>
									<span class="stat-value stat-error">3</span>
								</div>
							</div>
							<div>
								<table class="alarm-table">
									<tr class="alarm-header">
										<th>报警消息</th>
										<th>时间</th>
									</tr>
									<tr class="alarm-row" v-for="alarm in alarms.slice(0, 3)">
										<td>{{ alarm.device }}#{{ alarm.text }}</td>
										<td>{{ alarm.time }}</td>
									</tr>
								</table>
							</div>
						</div>
					</dv-border-box12>
				</el-row>
			</el-col>
		</el-row>
	</dv-full-screen-container>
</template>
<script setup>
import { NextLoading } from '/@/utils/loading';
import * as echarts from 'echarts';
import { ref, onMounted, useTemplateRef, reactive } from 'vue';
import { pieOption } from './options/pie';
import { lineOption } from './options/line';
import { temperatureOption, humidityOption } from './options/gauge';
const config1 = reactive({
	number: [100],
	content: '{nt}',
	style: {
		fontSize: 30,
		fill: '#3de7c9',
		height: 30,
	},
});
let devices = [
	{
		name: '防盗',
		id: '1',
		icon: 'iconfont icon-theft-full',
		status: '正常',
	},
	{
		name: '防有害气体',
		id: '2',
		icon: 'iconfont icon-youduyouhaiqitibaojing',
		status: '异常',
	},
	{
		name: '防鼠防虫',
		id: '3',
		icon: 'iconfont icon-laoshumubiao',
		status: '正常',
	},
	{
		name: '防潮防水',
		id: '4',
		icon: 'iconfont icon-yinyongshuiyuan',
		status: '正常',
	},
	{
		name: '防尘',
		icon: 'iconfont icon-fangchen-',
		id: '5',
		status: '异常',
	},
	{
		name: '防火',
		icon: 'iconfont icon-fanghuo',
		id: '6',
		status: '正常',
	},
	{
		name: '防高温',
		icon: 'iconfont icon-gaowen',
		id: '7',
		status: '正常',
	},
	{
		name: '防强光',
		icon: 'iconfont icon-lamp-open',
		id: '8',
		status: '正常',
	},
];

let alarms = [
	{
		device: '温湿度传感器',
		text: '湿度超标',
		time: '2025-01-15 14:30',
	},
	{
		device: '防火系统',
		text: '烟雾报警',
		time: '2025-01-15 13:45',
	},
	{
		device: '防盗系统',
		text: '门窗异常',
		time: '2025-01-15 12:15',
	},
	{
		device: '空气质量',
		text: 'PM2.5偏高',
		time: '2025-01-15 11:20',
	},
];
// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>
<style scoped lang="scss">
$normal: #0055ff, #4080ff, #70a0ff;
$warning: #ffc107;
$error: #f5222d;
.title {
	width: 6vw;
	position: relative;
	top: 0.5vw;
	left: 1vw;
}
.dv-bg {
	background-color: rgba($color: #000000, $alpha: 0.5);
}
//动态设置旋转角度
@for $index from 1 through 360 {
	.rotate-#{$index} {
		transform: rotate($index * 1deg);
	}
}
.full-screen-container {
	background-color: #02060e;
	height: 56.25vw;
	width: 100vw;
	display: flex;
	flex-direction: column;
	gap: 1vw;
	color: #d0d4e3;
}
.gradient-text-normal {
	background-image: -webkit-linear-gradient(top, nth($normal, 3), nth($normal, 2), nth($normal, 1));
	background-image: linear-gradient(to bottom, nth($normal, 3), nth($normal, 2), nth($normal, 1));
	-webkit-background-clip: text;
	background-clip: text;
	font-weight: bold;
	height: 40%;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.data-display {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: -11vw;
}

.data-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	min-width: 10vw;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.data-value {
	font-size: 2.5rem;
	font-weight: bold;
	margin: 10px 0;
}

.data-label {
	font-size: 1.2rem;
	opacity: 0.8;
}

/* 设备网格样式 */
.device-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	padding: 1.5vw;
	margin-top: 1vw;
}

.device-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1rem;
	border-radius: 0.5rem;
	border: 1px solid #333;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.device-icon {
	color: #374151;
	margin-right: 1rem;
}

.device-icon-style {
	font-size: 1.875rem !important;
	color: #0ea5e9;
}

.card-body {
	display: flex;
	flex-direction: column;
}

.card-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.card-text {
	font-size: 0.875rem;
}

.normal {
	color: #10b981;
}

.error {
	color: #ef4444;
}

/* 设备状态样式 */
.device-status-container {
	display: grid;
	grid-template-columns: 1fr;
	color: #dbeafe;
	padding: 1rem;
}

.device-summary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0.5rem 0;
    margin-top: 1.5vw;
	margin-bottom: 1rem;
}

.summary-number {
	font-size: xx-large;
	font-weight: bold;
	margin-bottom: 0.25rem;
    color: #0055ff;
}

.device-stats {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #333;
	margin-bottom: 1rem;
}

.stat-item {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	align-items: center;
    font-size: large;
}

.stat-value {
	font-weight: bold;
}

.stat-success {
	color: #15803d;
}

.stat-error {
	color: #dc2626;
}

.alarm-table {
	width: 100%;
	text-align: center;
	line-height: 2.5;
	border-collapse: collapse;
}

.alarm-header {
	color: #7dd3fc;
    font-size: x-large;
}

.alarm-header th {
	padding: 0.5rem;
	border-bottom: 1px solid #374151;
}

.alarm-row {
	cursor: pointer;
	transition: background-color 0.2s;
}

.alarm-row:nth-child(even) {
	background-color: rgba(147, 197, 253, 0.3);
}

.alarm-row:hover {
	background-color: rgba(147, 197, 253, 0.5);
}

.alarm-row td {
	padding: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
